<template>
  <a-form layout="horizontal" :form="form" class="form" >
    <a-row :gutter="8">
      <a-col :md="24" :sm="24">
        <a-form-item label="任务名" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            :disabled="updateFlag"
            v-decorator="[
              'jobName',
              {rules: [{ required: true, message: '请输入任务名', whitespace: true}], initialValue: this.initData.jobName}
            ]"/>
        </a-form-item>
      </a-col>
      <a-col :md="24" :sm="24">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="定时策略">
          <a-cron
            ref="innerVueCron"
            v-decorator="['cronExpression', {'initialValue':this.initData.cronExpression,rules:
              [{ required: true, message: '请输入cron表达式!' }]}]"
            @change="setCorn"></a-cron>
        </a-form-item>
      </a-col>
      <a-col :md="24" :sm="24">
        <a-form-item label="任务描述" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-textarea
            placeholder=""
            :rows="2"
            v-decorator="[
              'title',
              {rules: [{ required: true, message: '请输入任务描述', whitespace: true}], initialValue: this.initData.title}
            ]"
          />
        </a-form-item>
      </a-col>
      <a-col :md="24" :sm="24">
        <a-form-item label="类路径" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-textarea
            placeholder=""
            :rows="2"
            v-decorator="[
              'jobClassName',
              {rules: [{ required: true, message: '请输入类路径', whitespace: true}], initialValue: this.initData.jobClassName}
            ]"
          />
        </a-form-item>
      </a-col>
      <a-col :md="24" :sm="24">
        <a-form-item label="参数" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-textarea
            placeholder=""
            :rows="2"
            v-decorator="[
              'parameter',
              {rules: [{ required: true, message: '参数格式为JSONObject', whitespace: true}], initialValue: this.initData.parameter}
            ]"
          />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8" :style="{display:'none'}">
      <a-col :md="8" :sm="24">
        <a-form-item label="任务组" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            v-decorator="[
              'jobGroup',
              {rules: [{ required: false, message: '请输入任务组', whitespace: true}], initialValue: this.initData.jobGroup}
            ]"
            placeholder=""
          />
        </a-form-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-item label="调度名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            v-decorator="[
              'schedName',
              {rules: [{ required: false, message: '请输入调度名称', whitespace: true}], initialValue: this.initData.schedName}
            ]"
            placeholder=""
          />
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script>
import ACron from '@/components/ACron'

export default {
  components: { ACron },
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 21 }
      },
      form: this.$form.createForm(this),
      initData: {},
      updateFlag: false
    }
  },
  props: {
    quartzInfo: {
      type: Object,
      default: () => {},
      required: false
    }
  },
  created () {
    // 数据初始化
    if (this.quartzInfo) {
      const info = this.quartzInfo
      info.title = this.quartzInfo.description
      if (info.updateFlag) {
        this.updateFlag = info.updateFlag
      } else {
        this.updateFlag = false
      }
      this.initData = info
      this.setCorn(info.cronExpression)
    } else {
      this.initData = {}
    }
  },
  methods: {
    setCorn (data) {
      if (data !== undefined) {
        this.$nextTick(() => {
          this.form.setFieldsValue({ cronExpression: data })
        })
      }
    }
  }
}
</script>
